﻿
@{
    ViewBag.Title = "庐山云雾茶-注册账号";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Head{
    <style>
        .red {
            color: red;
            font-size: 14px;
        }
    </style>
}
<!--顶部样式-->
<div class="common_top">
    <div class="Narrow">
        <div class=" left logo"><a href="~/Home/Index"><img src="~/common/images/logo3.png" /></a></div>
        <!--电话图层-->
        <div class="phone"><label>全国服务热线：</label><em>400-345-5633</em></div>
    </div>
</div>
<!--用户注册样式-->
<div class="registered_style Narrow clearfix">
    <div class="left_advertising">
        <img src="~/common/images/bg_03.png" />
    </div>
    <div class="right_register">
        <div class="register_Switching" id="register_Switching">
            <div class="hd">
                <ul>
                    <li>用户注册</li>
                </ul>
            </div>
            <div class="bd">
                <ul>
                    <form id="form1" class="form1">
                        <div class="form clearfix">
                            <div class="item">
                                <label class="rgister-label">昵&nbsp;&nbsp;&nbsp;&nbsp;称：</label>
                                <input name="NickName" type="text" class="text" />
                            </div>
                            <div class="item">
                                <label class="rgister-label">
                                    密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
                                </label>
                                <input name="PassWord" id="PassWord" type="password" class="text" />
                            </div>
                            <div class="Password_qd">
                                <ul>
                                    <li id="ruo">弱</li>
                                    <li id="zhong">中</li>
                                    <li id="qiang">强</li>
                                </ul>
                            </div>
                            <div class="item">
                                <label class="rgister-label ">
                                    确认密码：
                                </label>
                                <input name="PassWordOk" type="password" class="text" />
                            </div>
                            <div class="item">
                                <label class="rgister-label">
                                    手&nbsp;&nbsp;机&nbsp;&nbsp;号：
                                </label>
                                <input name="PhoneNum" id="PhoneNum" type="text" class="text" />
                            </div>
                            <div style="margin-bottom:20px;margin-top:20px;">
                                <label class="rgister-label">性别：</label>
                                <div style="font-size:18px;">
                                    <div style="float:left;">
                                        <input name="Gender" id="male" style="width:20px;height:20px;" checked="checked" value="true" type="radio" />
                                        <label for="male">男</label>
                                    </div>
                                    <div style="clear:right;">
                                        <input style="width:20px;height:20px;" id="female" name="Gender" value="false" type="radio" />
                                        <label for="female">女</label>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <label class="rgister-label">电子邮箱：</label>
                                <input name="Email" id="Email" type="email" class="text" />
                            </div>
                            <div class="item">
                                <label class="rgister-label">
                                    验&nbsp;&nbsp;证&nbsp;&nbsp;码：
                                </label>
                                <input placeholder="请填写邮箱的验证码" name="ValidCode" type="text" class="text" />
                                <button class="phone_verification">获取验证码</button>
                            </div>
                        </div>
                        <div class="item-ifo">
                            <input type="checkbox" name="readme" class="checkbox left" checked="checked" id="readme" onclick="agreeonProtocol();">
                            <label for="protocol" class="left">
                                我已阅读并同意
                                <a href="#" class="blue" id="protocol">
                                    《庐山云雾茶用户注册协议》
                                </a>
                            </label>
                        </div>
                        <div class="rgister-btn">
                            <input type="submit" id="btn_sub" value="注&nbsp;&nbsp;&nbsp;&nbsp;册" class="btn_rgister" />
                        </div>
                        <div class="Note">
                            <span class="login_link">
                                已是会员
                                <a href="~/Login/Index">请登录</a>
                            </span>
                        </div>
                    </form>
                </ul>
            </div>
        </div>
        <!--填写发送邮件的验证码-->
        <div style="display:none;" class="clearfix" id="validCode">
            <div class="item">
                <label class="rgister-label ">验&nbsp;证&nbsp;码：</label>
                <input name="ImgCode" id="ImgCode" type="text" class="Recommend_text" style="width:150px;height:30px" />
                <div style="width: 150px;height: 40px; line-height: 40px;position: absolute; right:30px;top:0px;display: inline-block;">
                    <a href="javascript:void();">
                        <img src="~/Register/GetValidCode" id="codeImg" width="150px" ; height="40px" />
                    </a>
                </div>
            </div>
        </div>
    </div>
    @*<script>$(".register_Switching").slide({ trigger: "click" });</script>*@
</div>
<!--底部样式-->
<div class="bottom_footer">
    <p><a href="#">关于我们</a> | <a href="#">联系我们</a> |
    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1273799383'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1273799383%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script> | <a href="#">法律申明</a> | <a href="#">友情链接</a>  </p>
    <p>Copyright©2018九江庐山.All Rights Reserved. </p>
    <p><a href="http://www.miitbeian.gov.cn/">赣ICP备17011934号-2</a></p>
</div>
@section FooterScript{
    <script src="~/common/Threelinkage/layui/layui.js"></script>

    <script src="~/common/js/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var i = 60;

            function DisableBtn() {
                var id = setInterval(function () {
                    if (i < 1) {
                        $(".phone_verification").removeAttr("disabled").html("发送邮件");
                        clearInterval(id);
                        return;
                    }
                    i--;
                    $(".phone_verification").html(i + "秒后再试");
                }, 1000);
            }
            layui.use('layer', function () {
                var layer = layui.layer;
                jQuery.validator.addMethod("isMobile", function (value, element) {
                    var length = value.length;
                    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                    return this.optional(element) || (length == 11 && mobile.test(value));
                }, "请正确填写您的手机号码");

                $("#form1").validate({
                    errorClass: "red",
                    submitHandler: function () {
                        var load = layer.load(0, { shade: false });
                        var json = $('#form1').serialize();
                        $.ajax({
                            url: "/Register/Index",
                            data: json,
                            type: "post",
                            dataType: "json",
                            success: function (res) {
                                layer.close(load);
                                if (res.status == "ok") {
                                    location.href = "/Login/Index";
                                } else if (res.status == "redirect") {
                                    location.href = res.data;
                                } else if (res.status == "error") {
                                    layer.msg("注册失败："+res.errorMsg, { icon: 2, time: 1000 });
                                } else {
                                    layer.msg("错误", { icon: 2, time: 1000 });
                                }
                            },
                            error: function () {
                                layer.msg("网络错误", { icon: 2, time: 1000 })
                                layer.close(load);;
                            }
                        })
                        return false;
                    },
                    rules: {
                        NickName: { required: true },
                        UserName: "required",
                        PassWord: {
                            required: true,
                            rangelength: [6, 16]
                        },
                        PassWordOk: {
                            equalTo: "#PassWord"
                        },
                        Email: {
                            required: true,
                            email: true
                        },
                        PhoneNum: {
                            required: true,
                            isMobile: true
                        },
                        ValidCode: { required: true },
                        readme: { required: true }
                    },
                    messages: {
                        NickName: { required: "请输入昵称" },
                        UserName: "请输入用户名*",
                        PassWord: {
                            required: "必填*",
                            rangelength: "密码最少{0}，最多{1}字符"
                        },
                        PassWordOk: {
                            equalTo: "两次输入的密码不一致"
                        },
                        Email: {
                            required: "必填*",
                            email: "请输入正确的邮箱格式"
                        },
                        PhoneNum: {
                            required: "必填*",
                            isMobile: "请填写正确的手机号码格式"
                        },
                        ValidCode: {
                            required: "必填"
                        },
                        readme: { required: "请阅读协议" }
                    }
                });

                $('#codeImg').click(function () {
                    $('#codeImg').attr("src", "/Register/GetValidCode?data=" + new Date());
                });

                $('#PassWord').change(function () {
                    var pwd = $('#PassWord').val();
                    if (pwd != "") {
                        var i = GetPwdGrade(pwd);
                        if (i == 1) {
                            $('#ruo').addClass("r");
                            $('#zhong').removeClass("z");
                            $('#qiang').removeClass("q");
                        } else if (i == 2) {
                            $('#ruo').removeClass("r");
                            $('#zhong').addClass("z");
                            $('#qiang').removeClass("q");
                        } else if (i == 3) {
                            $('#ruo').removeClass("r");
                            $('#zhong').removeClass("z");
                            $('#qiang').addClass("q");
                        }
                    }
                });

                function GetPwdGrade(pwd) {
                    var i = 0;
                    if (/\d+/.test(pwd)) {
                        i++;
                    }
                    if (/[A-Za-z]+/.test(pwd)) {
                        i++;
                    }
                    if (/[\W]/.test(pwd)) {
                        i++;
                    }
                    return i;
                }

                $(".phone_verification").click(function () {
                    var openCode = layer.open({
                        type: 1,
                        title: "请填写验证码", //不显示标题栏
                        closeBtn: false,
                        area: ['400px', '200px'],
                        shade: 0.8,
                        id: 'LAY_layuipro',
                        btn: ['确认', '取消'],
                        btnAlign: 'c',
                        moveType: 1,
                        content: $('#validCode'),
                        btn1: function () {
                            //获取填写的验证码
                            var code = $('#ImgCode').val();
                            $('#ImgCode').val("");
                            var email = $('#Email').val();
                            console.log(email);
                            $.ajax({
                                url: "/Register/SendValidCode",
                                data: { Code: code, Email: email },
                                type: "post",
                                dataType: "json",
                                success: function (res) {
                                    if (res.status == "ok") {

                                        $(".phone_verification").attr('disabled', 'disabled');
                                        DisableBtn();
                                        layer.msg("发送成功", { icon: 1, time: 1000 });
                                    } else if (res.status == "redirect") {
                                        location.href = res.data;
                                    } else if (res.status == "error") {
                                        layer.msg(res.errorMsg, { icon: 2, time: 1000 });
                                    } else {
                                        layer.msg("错误", { icon: 2, time: 1000 });
                                    }
                                    $('#codeImg').click();
                                }, error: function () {
                                    layer.alert('网络错误', { icon: 1 });
                                    $('#codeImg').click();
                                }
                            });
                            layer.close(openCode);
                        }
                    });
                });

            })
        })
    </script>
}
